<template>
  <div class="main-box">
	  <el-row class="topRow">
	    <el-button type="danger" @click="batchDelete">批量删除</el-button>
	  </el-row>

    <el-table
      :data="expenseList"
      border
      style="width: 100%" @selection-change="handleSelectionChange">
	  <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        fixed prop="id" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="activityName" label="活动名称" align="center" width="160"></el-table-column>
      <el-table-column prop="userName" label="社长姓名" align="center"></el-table-column>
      <el-table-column prop="activitySponser" label="所属社团" align="center" width="120"></el-table-column>
	  <el-table-column prop="activityAddress" label="活动地点" align="center" width="150"></el-table-column>
      <el-table-column prop="jk_amount" label="借款金额" align="center"></el-table-column>
      <el-table-column prop="bx_amount" label="报销金额" align="center"></el-table-column>
	  <el-table-column prop="sj_amount" label="实际金额" align="center"></el-table-column>
	  <el-table-column prop="file" label="报销说明" align="center"width="230"></el-table-column>
      <el-table-column label="报销时间" align="center" width="200">
        <template slot-scope="scope">{{scope.row.create_time | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="typeTag[scope.row.status]" effect="dark">{{approvalTag[scope.row.status]}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="activityType" label="活动类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="tagStyle[scope.row.activityType]" effect="dark">{{activityTag[scope.row.activityType]}}</el-tag>
        </template>
      </el-table-column>
	  <el-table-column fixed="right" align="right" width="200">
	    <template slot="header" slot-scope="scope">
	      <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
	    </template>
	    <template slot-scope="scope">
        <el-button
          v-if="scope.row.status!=0"
          size="mini"
          type="info"
          style="margin-left: 10%;">删除
        </el-button>
	      <el-button
          v-else
	        size="mini"
	        type="danger"
	        style="margin-left: 10%;"
	        @click="handleDelete(scope.$index, scope.row)">删除
	      </el-button>
        <el-button
          v-if="scope.row.status!=0"
          size="mini"
          type="info"
          style="margin-left: 10%;">修改
        </el-button>
	      <el-button
          v-else
	        size="mini"
	        type="warning"
	        style="margin-left: 10%;"
	        @click="handleUpdate(scope.$index, scope.row)">修改
	      </el-button>
	    </template>
	  </el-table-column>
    </el-table>

	<div class="update-box">
	  <el-dialog title="修改" :visible.sync="dialogUpdateFormVisible">
	    <el-form ref="expenseUpdateForm" :model="row">
	      <el-form-item label="活动名称" :label-width="formLabelWidth" prop="activityName">
	        <el-input v-model="row.activityName" autocomplete="off" name="activityName" disabled />
	      </el-form-item>
	      <el-form-item label="所属社团" :label-width="formLabelWidth" prop="activitySponser">
	        <el-input v-model="row.activitySponser" autocomplete="off" name="activitySponser" disabled />
	      </el-form-item>
	      <el-form-item label="借款金额" :label-width="formLabelWidth" prop="jk_amount">
	        <el-input v-model="row.jk_amount" autocomplete="off" />
	      </el-form-item>
	      <el-form-item label="报销金额" :label-width="formLabelWidth" prop="bx_amount">
	        <el-input v-model="row.bx_amount" autocomplete="off" />
	      </el-form-item>
		  <el-form-item label="报销说明" :label-width="formLabelWidth" prop="file">
		    <el-input v-model="row.file" autocomplete="off" />
		  </el-form-item>
	    </el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
	      <el-button type="primary" @click="expenseUpdateInfo">确 定</el-button>
	    </div>
	  </el-dialog>
	</div>

    <!--分页-->
    <div class="pagination-box">
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    import localStorageUtil from "../../../utils/localStorageUtil";
    import {formatDate} from '../../../utils/date'
    export default {
        methods: {
            approvalActivityStatus(row) {
                let {id,status} = row;
                let data = {
                    id: id,
                    status: status
                }
                this.$store.dispatch('expense/approval',data).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '修改已提交',
                            type: 'success'
                        });
                    }
                })
            },
            fetchActivities() {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
					userId: this.currentUser.userId,
                };
				console.log(params)
			//	console.log(userId)
                this.$store.dispatch('expense/findAllByPaging', params).then((res) => {
                    this.expenseList = res.data
                })
            },
            handleDelete(index, row) {
                this.$confirm(`确认删除：第${row.id}报销记录吗？`)
                    .then(_ => {
                        this.$store.dispatch('expense/removeById', row.id).then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    showClose: true,
                                    message: '删除成功',
                                    type: 'success'
                                })
                            }
                            this.fetchActivities()
                        })
                    })
                    .catch(_ => {
                        this.$message({
                            showClose: true,
                            message: '已经取消'
                        })
                    });
            },
            /* 获取总记录条数*/
            fetchTotal() {
                this.$store.dispatch('expense/findTotal').then((res) => {
                    this.total = res.data
                })
            },
            /* 每页显示多少条改变时间*/
            handleSizeChange(val) {
                this.pageNum = 1;
                this.pageSize = val;
                this.fetchActivities()
            },
            /* 页码发生改变时间*/
            handleCurrentChange(val) {
                this.pageNum = val
                this.fetchActivities()
            },
			handleUpdate(index, row) {
			  this.row = row
			  this.dialogUpdateFormVisible = true
			},
			expenseUpdateInfo() {
			  this.$store.dispatch('expense/expenseUpdateInfo', this.row).then((res) => {
			    if (res.code === 200) {
			      this.$message({
			        message: '修改成功',
			        type: 'success'
			      })
			    }
			    this.dialogUpdateFormVisible = false
			    this.fetchActivities()
			  })
			},
			handleSelectionChange(val) {
			  this.multipleSelection = val
			},
			batchDelete() {
			  const ids = []
			  this.multipleSelection.forEach(element => {
			    ids.push(element.id)
			  })
			  this.$confirm(`确认删除选中的用户吗？`)
			    .then(_ => {
					console.log(ids)
			      this.$store.dispatch('expense/batchDeleteById', ids).then((res) => {
			        if (res.code === 200) {
			          this.$message({
			            showClose: true,
			            message: `删除成功,共${res.data}条记录`,
			            type: 'success'
			          })
			        }
					this.fetchActivities()
			      })
			    })
			    .catch(_ => {
			      this.$message({
			        showClose: true,
			        message: '已经取消'
			      })
			    })
			}
        },
        created() {
            this.fetchActivities()
            this.fetchTotal()
        },
        filters: {
            /*时间过滤器*/
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');
            }
        },
        data() {
            return {
                expenseList: [
                    {
                        id: '',
                        activityName: '',
						userName: '',
						activitySponser: '',
						activityAddress: '',
						jk_amount: '',
						bx_amount: '',
						sj_amount: '',
						create_time: '',
                        activityType: '',
                        status: ''
                    }
                ],
                genderList: ['男', '女'],
                approvalTag: ['审核中', '通过审核', '未通过审核', '活动已经结束'],
                activityTag: ['普通活动', '招新活动'],
                typeTag: ['', 'success', 'info'],
                pageNum: 1,
                pageSize: 6,
                total: 10,
                tagStyle: ['success','danger'],
				row: {},
				dialogUpdateFormVisible: false,
				multipleSelection: [],
				search: '',
				formLabelWidth: '120px',
				currentUser: localStorageUtil.read('SET_USER'),
				userId: ''
            }
        },
		watch: {
		  /* 监听用户的搜索*/
		  search(oldVal, newVal) {
		    if (oldVal !== newVal && this.search !== '') {
		      this.$store.dispatch('expense/findAllByLike', this.search).then((res) => {
		        this.expenseList = res.data
		      })
		    } else {
		      this.fetchActivities()
		    }
		  }
		},
    }
</script>

<style>
  .main-box {
    margin: 2% 2%;
  }
  .pagination-box {
    margin: 4% 30%;
  }

</style>
